<template>
    <div class="heart">
        <img src="../../assets/img/heart.png" alt="">
        <div class="header1">
            <div class="header-left">
                <span @click="$router.go(-1)">
                    <i class="iconfont iconzuojiantou"></i>
                </span>
            </div>
        </div>
        <div class="userinfo" v-if="level">
            <div class="msg flex-center">
                <img :src="userinfo.avatar" alt="" class="avatar">
                <div class="name">
                    <p>{{userinfo.username}}</p>
                    <img :src="require('../../assets/img/v'+level+'.png')" alt="" class="vip">
                </div>
            </div>
        </div>
        <div class="userinfo" v-else>
            <div class="msg flex-center">
                <img src="../../assets/img/invite-text.png" alt="" class="invite-text">
            </div>
        </div>
        <div class="btn" @click="goScoreIn">
            <img src="../../assets/img/invite-btn2.png" alt=""  v-if="level">
            <img src="../../assets/img/invite-btn1.png" alt="" v-else>

        </div>
    </div>
</template>

<script>
    export default {
        name: "heart",
        data(){
            return{
                score:null,
                level:null,
                score_arr:[],
                userinfo:{}
            }
        },
        mounted(){
          this.getUser();
          this.getRank()
        },
        methods:{
            getRank(){
              this.$http.post("User/rank",{}).then(res=>{
                  console.log(res)
                  this.score_arr = res.data;
              })
            },
            getUser(){
                this.$http.post('user/getUserInfo',{}).then(res=>{
                    this.userinfo = res.data;
                    this.level = res.data.level;
                    this.score = Number(res.data.money);
                    this.$store.dispatch('changeUser',res.data)
                })
            },
            goScoreIn(){
                //  let score = this.score[]
                // if(this.score >= )
                if(this.score < this.score_arr[this.level].needmoney){
                    this.$vux.confirm.show({
                        title: "提示",
                        content: "积分不足，是否确认充值?",
                        // 组件除show外的属性
                        onCancel: () => {

                        },
                        onConfirm: () => {
                            this.$router.push({
                                path:"/vipScore?level="+this.level
                            })
                            return
                        }
                    })
                    return false
                }
                let text = this.level ? "升级" :"开通";
                this.$vux.confirm.show({
                    title: "提示",
                    content: "是否确认"+ text +"?",
                    // 组件除show外的属性
                    onCancel: () => {
                    },
                    onConfirm: () => {
                        this.$http.post('user/vip',{}).then(res=>{
                            this.$toast(res.msg);
                            this.getUser()
                        })
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .heart{
        position: relative;
        overflow: hidden;
        &>img{
            width: 100vw;
            object-fit: cover;
        }
        .userinfo{
            position: absolute;
            top:500px;
            width: 100vw;
            z-index: 2;
            padding-top: 32px;
            .invite-text{
                width: 450px;
                margin-top: 20px;
            }
            .avatar{
                width: 88px;
                border:2px solid white;
                border-radius: 50%;
                margin-right: 20px;
            }
            .name{
                p{
                    font-size: 30px;
                    color: #ffffff;
                }
            }
            .vip{
                width: 68px;
            }
        }
        .header1{
            position: fixed;
            top: 0;
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            z-index: 10;
            .header-left{
                width: 200px;
                span{
                    display: inline-block;
                    height: 100%;
                    padding: 0 24px;
                    i{
                        font-size: 40px;
                        color: white;
                    }
                }
            }
        }
        .btn{
            position: absolute;
            width: 333px;
            height: 100px;
            top: 630px;
            left:calc(50% - 175px);
            text-align: center;
            z-index: 1;
            img{
                height:120px ;
            }
        }
    }
</style>
